<template>
	<el-dialog title="更新商品" :visible="visible" center :before-close="handerClose">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="品牌" prop="name">
				<el-input v-model="ruleForm.name"></el-input>
			</el-form-item>
			<el-form-item label="大类" prop="type">
				<el-input v-model="ruleForm.type"></el-input>
			</el-form-item>
			<el-form-item label="小类" prop="classes">
				<el-input v-model="ruleForm.classes"></el-input>
			</el-form-item>
			<el-form-item label="材质,制作" prop="materials">
				<el-input v-model="ruleForm.materials"></el-input>
			</el-form-item>
			<el-form-item label="适用规格" prop="scope">
				<el-input v-model="ruleForm.scope"></el-input>
			</el-form-item>
			<el-form-item label="专属规格" prop="exScope">
				<el-input v-model="ruleForm.exScope"></el-input>
			</el-form-item>
			<el-form-item label="包装规格" prop="packScope">
				<el-input v-model="ruleForm.packScope"></el-input>
			</el-form-item>
			<el-form-item label="口味" prop="taste">
				<el-input v-model="ruleForm.taste"></el-input>
			</el-form-item>
			<el-form-item label="特殊功用" prop="specialPublic">
				<el-input v-model="ruleForm.specialPublic"></el-input>
			</el-form-item>
			<el-form-item label="产地" prop="placeOrigin">
				<el-input v-model="ruleForm.placeOrigin"></el-input>
			</el-form-item>
			<el-form-item label="生产日期" prop="dateProduced">
				<el-input v-model="ruleForm.dateProduced"></el-input>
			</el-form-item>
			<el-form-item label="保质期" prop="exDate">
				<el-input v-model="ruleForm.exDate"></el-input>
			</el-form-item>
			<el-form-item label="特色说明" prop="explain">
				<el-input v-model="ruleForm.explain"></el-input>
			</el-form-item>
			<el-form-item label="价格" prop="price">
				<el-input v-model="ruleForm.price"></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio v-model="ruleForm.status" :label="0">下架</el-radio>
				<el-radio v-model="ruleForm.status" :label="1">在售</el-radio>
			</el-form-item>
		</el-form>

		<el-upload class="upload-demo" action="api/goods/upload" :on-success="handleSuccess" :on-remove="handleRemove"
		 list-type="picture" :file-list="bigFileList">
			<el-button size="small" type="primary">上传大图</el-button>
		</el-upload>

		<el-upload class="upload-demo" action="api/goods/upload" :on-success="smaImgSuccess" :on-remove="smaImgRemove"
		 list-type="picture" :file-list="smaFileList">
			<el-button size="small" type="primary">上传小图</el-button>
		</el-upload>

		<div slot="footer" class="dialog-footer">
			<el-button @click="handelCancel">取 消</el-button>
			<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	let _ = require('lodash')
	import {
		updateGoods
	} from "@/service/goods.js"
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	import {
		proUrl
	} from "@/utils/index.js"
	export default {
		data() {
			return {
				rules: {
					name: [{
						required: true,
						message: '请输入商品品牌名或推广标题',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请输商品类别(主粮、洗浴、日用品等)',
						trigger: 'blur'
					}],
					classes: [{
						required: true,
						message: '请输入小类别(狗粮、猫粮等)',
						trigger: 'blur'
					}],
					materials: [{
						required: true,
						message: '请输入材质',
						trigger: 'blur'
					}],
					scope: [{
						required: true,
						message: '请输入适用规格',
						trigger: 'blur'
					}],
					exScope: [{
						required: true,
						message: '请输入专属规格',
						trigger: 'blur'
					}],
					packScope: [{
						required: true,
						message: '请输入包装规格',
						trigger: 'blur'
					}],
					taste: [{
						required: true,
						message: '请输入口味',
						trigger: 'blur'
					}],
					specialPublic: [{
						required: true,
						message: '请输入特殊功用',
						trigger: 'blur'
					}],
					placeOrigin: [{
						required: true,
						message: '请输入产地',
						trigger: 'blur'
					}],
					dateProduced: [{
						required: true,
						message: '请输入生产日期',
						trigger: 'blur'
					}],
					exDate: [{
						required: true,
						message: '请输入保质期',
						trigger: 'blur'
					}],
					explain: [{
						required: true,
						message: '请输入产品特色',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur'
					}],
					status: [{
						required: true,
						message: '请选择状态',
						trigger: 'blur'
					}],
				},
			}
		},
		computed: {
			...mapState("goods", ["visible", "ruleForm"]),
			bigFileList() {
				return this.ruleForm.imgs.bigImg ? this.ruleForm.imgs.bigImg.map(item => ({
					name: item,
					url: proUrl + item
				})) : []
			},
			smaFileList() {
				return this.ruleForm.imgs.smaImg ? this.ruleForm.imgs.smaImg.map(item => ({
					name: item,
					url: proUrl + item
				})) : []
			},
		},
		methods: {
			...mapActions("goods", ["show"]),
			...mapMutations("goods", ["setVisible"]),
			handleRemove(file, fileList) { //文件列表移除文件时的钩子
				_.pull(this.ruleForm.imgs.bigImg, file.name)
			},
			handleSuccess(response, file, fileList) { //上传成功时
				this.ruleForm.imgs.bigImg.push(response.url)
			},

			smaImgRemove(file, fileList) { //文件列表移除文件时的钩子
				_.pull(this.ruleForm.imgs.smaImg, file.name)
			},
			smaImgSuccess(response, file, fileList) { //上传成功时
				this.ruleForm.imgs.smaImg.push(response.url)
			},
			handerClose() {
				this.setVisible(false)
			},
			submitForm(ruleForm) {
				this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						this.setVisible(false)
						updateGoods(this.ruleForm._id, this.ruleForm)
						this.show()
					} else {
						return false;
					}
				});
			},
			handelCancel() {
				this.setVisible(false)
			}
		}

	}
</script>

<style>
	.el-upload-list__item {
		transition: none !important;
	}
</style>
